<script setup>
import MenuItemRecursion from '@/components/commons/base/menu/MenuItemRecursion.vue'
import { InitMenuItem } from '@/assets/tools/constructors.js'
import { computed } from 'vue'

const props = defineProps({
  menuItems: { type: Array, default: () => [] },
  isCollapsed: { type: Boolean, default: false },
})

const defaultMenuItems = [
  new InitMenuItem('0', 'Item1').setSort(1).initRoute('/test').setIconClass('i-flowbite-file-lines-outline'),
  new InitMenuItem('1', 'Parent2').setSort(2).initDir().setIconClass('i-flowbite-paper-clip-outline'),
  new InitMenuItem('2', 'Item2.1', '1').setSort(2.1),
  new InitMenuItem('3', 'Parent2.2', '1').setSort(2.2).initDir(),
  new InitMenuItem('4', 'Item2.2.1', '3').setSort(2.21),
  new InitMenuItem('5', 'Item2.2.2', '3').setSort(2.22),
  new InitMenuItem('6', 'Item3').setSort(3),
]

const finalMenuItems = computed(() => {
  if (props.menuItems.length !== 0) return props.menuItems
  return defaultMenuItems
})

const collapsed = computed(() => {
  return props.isCollapsed
})

</script>

<template>
  <ul class="menu bg-base-200 rounded-box">
    <MenuItemRecursion :menu-items="finalMenuItems" :is-collapsed="collapsed"/>
  </ul>
  
  <!-- <ul class="menu bg-base-200 rounded-box w-56">
    <li><a><div class="i-flowbite-paper-clip-outline w-5 h-5"></div>Item 1</a></li>
    <MenuItem name="Item2" iconClass="i-flowbite-file-lines-outline"/>
    <MenuItem name="Item3" route="/test"/>
    <MenuItem name="Parent4" is-dir></MenuItem>
    <MenuItem name="Parent5" is-dir is-open>
      <MenuItem name="Item5.1"></MenuItem>
      <MenuItem name="Parent5.2" is-dir>
        <MenuItem name="Item5.2.1"></MenuItem>
      </MenuItem>
      <MenuItem name="Parent5.3" is-dir is-open>
        <MenuItem name="Item5.3.1"></MenuItem>
        <MenuItem name="Item5.3.2"></MenuItem>
      </MenuItem>
    </MenuItem>
    <MenuItem name="Item6"></MenuItem>
  </ul> -->
</template>

<style scoped>

</style>